<template>
  <div>
    <div class="title">
      <h1>企业列表</h1>
      <div class="search_box">
        <div class="search">
          <el-input
            class="import"
            placeholder="输入设备名称关键字"
            clearable
            v-model="search"
            @change="query"
          >
          </el-input>
          <!-- <button>
            <img
              src="../../assets/image/Vectorintelligentobject_2.png"
              alt=""
            />
          </button> -->
        </div>
        <!-- <el-button size="mini" type="primary">导出</el-button> -->
        <el-button size="mini" type="primary" @click="query">查询</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      stripe
      style="background-color: transparent; margin: auto"
      :height="height"
    >
      <el-table-column prop="p_hour" label="数据日期" align="center">
      </el-table-column>
      <el-table-column prop="cellid" label="小区ID" align="center">
      </el-table-column>
      <el-table-column prop="city_name" label="归属地市" align="center">
      </el-table-column>
      <el-table-column prop="equipment_name" label="设备名称" align="center">
      </el-table-column>
      <el-table-column prop="fault_type" label="故障类型" align="center">
      </el-table-column>
      <el-table-column prop="fault_id" label="故障编码" align="center">
      </el-table-column>
      <el-table-column prop="fault_name" label="故障名称" align="center">
      </el-table-column>
      <el-table-column prop="start_time" label="发现时间" align="center">
      </el-table-column>
      <!-- <el-table-column prop="tcp_create_time" label="故障原因" align="center">
      </el-table-column> -->
      <el-table-column prop="manufacturer_name" label="归属厂商" align="center">
      </el-table-column>
      <el-table-column prop="register_time" label="登记时间" align="center">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[15, 50, 100, 200, 300]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { baseURL } from "../../utils/ipConfig";

export default {
  data() {
    return {
      total: 0,
      pageNum: 1,
      pageSize: 15,
      areaCode: "0850",
      height: "51vh",
      equipment_name: "",
      tableData: [],
      options: [
        {
          label: "贵州省",
          value: "0850",
        },
        {
          label: "贵阳市",
          value: "0851",
        },
        {
          label: "遵义市",
          value: "0852",
        },
        {
          label: "安顺市",
          value: "0853",
        },
        {
          label: "黔南布依族苗族自治州",
          value: "0854",
        },
        {
          label: "黔东南苗族侗族自治州",
          value: "0855",
        },
        {
          label: "铜仁市",
          value: "0856",
        },
        {
          label: "毕节市",
          value: "0857",
        },
        {
          label: "六盘水市",
          value: "0858",
        },
        {
          label: "黔西南布依族苗族自治州",
          value: "0859",
        },
      ],
      search: "",
      bei: [],
    };
  },
  watch: {},
  beforeMount() {
    if (document.documentElement.clientWidth <= 1600) {
      this.height = "44vh";
    } else {
      this.height = "51vh";
    }
  },
  mounted() {
    this.getAlarmMonitoringDataByTime();
  },
  methods: {
    getAlarmMonitoringDataByTime() {
      let _this = this;
      let param = new URLSearchParams();
      param.append("pageNum", _this.pageNum);
      param.append("pageSize", _this.pageSize);
      param.append("equipment_name", _this.search);
      _this.$ajax
        .post(`${baseURL.ip1}/pc/getAlarmMonitoringDataByTime`, param)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200 || resData.code == 0) {
            _this.tableData = resData.data;
            if (_this.total !== resData.count) {
              _this.total = resData.count;
            }
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 查询
    query() {
      this.getAlarmMonitoringDataByTime();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getAlarmMonitoringDataByTime();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getAlarmMonitoringDataByTime();
    },
    filterOne(dataList, value, type) {
      var s = dataList.filter(function (item, index, arr) {
        for (let j = 0; j < type.length; j++) {
          if (item[type[j]] != undefined || item[type[j]] != null) {
            if (item[type[j]].indexOf(value) >= 0) {
              return item;
            }
          }
        }
      });
      return s;
    },
  },
};
</script>

<style lang="scss" scoped>
/* 标题 */
.title {
  padding: 0 1vw;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  h1 {
    height: 4vh;
    line-height: 4vh;
    font-size: 18px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
  }
  .search_box {
    display: flex;
    flex-flow: row nowrap;
    .search {
      height: 3vh;
      padding: 5px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      background: url("../../assets/image/rectangle6.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 5px;
      input {
        width: 14vw;
        height: 4vh;
        padding-left: 3px;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        &::placeholder {
          color: #005185;
        }
      }
    }
  }
}
</style>